﻿@{
    ViewBag.Title = "admin";
    Layout = "~/Views/Shared/adminAmazeui.cshtml";
}
@section style{
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
}

<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">菜谱</strong> / <small>搜索添加</small></div>
</div>

<div id="app" v-cloak class="am-g">
    <div class="am-u-sm-12 am-u-md-4">
        <div class="am-form-group am-form-group-sm">
            <select v-model="type" class="am-form-field">
                <option value="热门专题">热门专题</option>
                <option value="汤粥主食">汤粥主食</option>
                <option value="蛋奶豆制品">蛋奶豆制品</option>
                <option value="蔬菜水果">蔬菜水果</option>
                <option value="烘焙甜品饮料">烘焙甜品饮料</option>
                <option value="水产">水产</option>
                <option value="口味特色">口味特色</option>
                <option value="肉类">肉类</option>
                <option value="米面干果腌咸">米面干果腌咸</option>
                <option value="口味特色">口味特色</option>
            </select>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-8">
        <div class="am-input-group am-input-group-sm">
            <input type="text" v-model="keyword" class="am-form-field">
            <span class="am-input-group-btn">
                <button class="am-btn am-btn-default" v-on:click="fetchSearchResult" type="button">搜索</button>
            </span>
        </div>
    </div>
    <div class="am-u-sm-12">
        <table class="am-table am-table-bd am-table-striped admin-content-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>图片</th>
                    <th>菜名</th>
                    <th>描述</th>
                    <th>类型</th>
                    <th>管理</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in searchlist">
                    <td>{{index+1}}</td>
                    <td>
                        <img v-bind:src="item.smallImg" width="100" />
                    </td>
                    <td width="200">{{item.cpName}}</td>
                    <td width="300">{{item.des}}</td>
                    <td>{{item.type}}</td>
                    <td>
                        <a v-on:click="preview(item)" class="am-btn am-btn-default am-btn-xs">查看步骤</a>
                        <a v-on:click="saveCook(item)" class="am-btn am-btn-success am-btn-xs">添加</a>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <div v-show="isShow" v-on:click="hidePreview" style="position:fixed;background-color:rgba(0,0,0,.7);top:0;left:0;right:0;bottom:0;z-index:4;">
        <div style="position:absolute;top:200px;left:50%;width:500px;margin-left:-250px;height:500px;overflow-y:auto;background-color:#fff;padding:20px;font-size:14px;">
            <div v-for="step in showModel.steps">
                <img v-show="step.imgUrl" v-bind:src="step.imgUrl" width="300" />
                <div class="am-margin-top-sm am-margin-bottom-lg">{{step.content}}</div>
            </div>
        </div>
    </div>

</div>
@section script{
    <script src="~/Scripts/vue.min.js"></script>
    <script src="~/Scripts/vue-resource.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isWaiting: false,
                type: '热门专题',
                keyword: '',
                showModel: {},
                isShow: false,
                searchlist: []
            },
            methods: {
                saveCook: function (item) {

                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("SaveCook")",
                        dataType: "json",
                        data: "CookModel="+JSON.stringify(item),
                        success: function (result) {
                            console.log(result);
                 
                        }
                    });

                    @*this.$http.post("@Url.Action("SaveCook")", { body: "" }, { params: item }).then(function (response) {
                        console.log("saveCook:POST:success===>" + response.body);
                    }, function (response) {
                        console.log("saveCook:POST:fail===>", response);
                    });*@
                },
                preview: function (m) {
                    console.log('preview', m);
                    this.showModel = m;
                    this.isShow = true;
                },
                hidePreview: function () {
                    this.showModel = {};
                    this.isShow = false;
                },
                fetchSearchResult: function () {
                    var keyword = this.keyword;
                    if (keyword) {
                        var url = "http://route.showapi.com/1164-1?showapi_sign=3f0c698c4357477ba780198b22f4eeaf&showapi_appid=35037&maxResult=50&page=1&type=" + this.type + "&cpName=" + keyword;
                        this.$http.post(url).then(
                            function (response) {
                                console.log("success===>", response.body);
                                if (response.body.showapi_res_body && response.body.showapi_res_body.datas) {
                                    var list = response.body.showapi_res_body.datas;
                                    this.searchlist = list;
                                }
                            }, function (response) {
                                console.log("error===>" + JSON.stringify(response));
                            });
                    }

                }

            },

            mounted: function () {
                this.$nextTick(function () {
                    var self = this;
                    console.log('$nextTick');
                    //$.ajax({
                    //    type: "POST",
                    //    url: "http://route.showapi.com/341-2?showapi_sign=3f0c698c4357477ba780198b22f4eeaf&showapi_appid=35037&maxResult=50&page=1",
                    //    dataType: "json",
                    //    success: function (result) {
                    //    }
                    //});

                })
            }
        })

    </script>
}
